<template>
	<view class="padding-top">
		<view class="header">
			<view class="title">{{detail.title}}</view>
			<view class="desc">
				<text class="money">￥{{detail.price}}</text>
				<text class="price">市场价：￥{{detail.market_price}}</text>
				<text class="text-df">库存：{{detail.stock}}张</text>
			</view>
		</view>
		<!-- 使用规则 -->
		<view class="details">
			<prompt title="卡券详情" :cont="describe | filterCont(describe)">
				<text @click="$refs.isBuyHintPopup.show()" class="text-orange" style="text-decoration: underline;">购买须知</text>
			</prompt>
			<!-- <prompt title="使用时间" cont="周末、法定节假日通用（07:00~22:30）"></prompt>
			<prompt title="使用规则" cont="预约提示：无需预约，直接消费（高峰期间消费需排号等位）"></prompt>
			<prompt title="使用门店" cont="西安市全城哈根达斯所有门店"></prompt> -->
		</view>
		
		<v-fromid>
			<!-- 底部操作条 -->
			<bottom-bar button-text="立即支付" @submit="onSubmit">
				<view @click="goHome" class="text-gray bottom-item flex flex-direction justify-center align-center">
					<text class="icon-home" style="font-size: 22px;"></text>
					<text class="text-sm">首页</text>
				</view>
				<button open-type="contact">
					<view class="text-gray bottom-item flex flex-direction justify-center align-center">
						<text class="icon-service margin-bottom-xs" style="font-size: 20px;"></text>
						<text class="text-sm">客服</text>
					</view>
				</button>
			</bottom-bar>
		</v-fromid>
		
		<!-- 购买须知弹出框 -->
		<buy-hint ref="isBuyHintPopup" top="30">
			<scroll-view style="height: 600rpx;" scroll-y>
				<rich-text :nodes="nodes | filterCont(nodes)"></rich-text>
			</scroll-view>
			<view @click="$refs.isBuyHintPopup.close()" class="cu-btn bg-green round shadow margin-top">继续购买</view>
		</buy-hint>
		
		<!-- 确认购买弹出框 -->
		<bottom-popup :show="isPayPopup" @close="()=> this.isPayPopup = false">
			<view class="popup-shops-cont">
				<view class="popup-shops-item solid-bottom">
					<view class="title">{{detail.title}}</view>
					<view class="desc">
						<text class="price text-bold">￥{{detail.price}}</text>
					</view>
				</view>
				<view class="popup-shops-item popup-shops-item-num">
					<text>购买数量：</text>
					<view>
						<van-stepper :value="num" max="5" @overlimit="onStepperOrverLimit" @change="onStepperChange" />
					</view>
				</view>
				<view class="flex shadow">
					<view style="width: 450rpx;" class="text-bold text-black text-lg popup-shops-confirm-btn bg-white">
						合计：<text style="color: #FC4E11;">￥{{total}}</text>
					</view>
					<view 
					class="text-lg flex-sub popup-shops-confirm-btn bg-green"  
					@click="onPlaceOrder">立即支付</view>
				</view>
			</view>
		</bottom-popup>
		<!-- 支付成功弹窗 -->
		<pay-succeed ref="succeed"></pay-succeed>
		<!-- 用户授权弹出框 -->
		<accredit ref="showPicker" @userInfo="GetUserSuccess"></accredit>
	</view>
</template>

<script>
	import PopupLayer from "@/components/popup-layer/popup-layer.vue"
	import BottomBar from '@/components/BottomBar.vue'
	import Prompt from '@/components/Prompt.vue'
	import BuyHint from "@/components/BuyHint.vue"
	import BottomPopup from "@/components/popup-layer/bottom-popup.vue"
	import PaySucceed from "@/components/PaySucceed.vue"
	import vFromid from "@/components/fromid/fromid.vue"
	import { alert, toast } from "@/utils/util.js"
	import orderApi from "@/Api/Order.js"
	import HelpApi from "@/Api/Help.js"
	import TabApi from "@/Api/Tab.js"

	export default {
		components: {
			Prompt,
			BottomBar,
			BuyHint,
			PopupLayer,
			BottomPopup,
			PaySucceed,
			vFromid
		},
		computed: {
			userAccredit() {
				return this.$store.state.userAccredit;
			},
			total() {
				if(this.detail && this.detail.price) {
					return (parseFloat(this.detail.price || 0) * parseFloat(this.num) ).toFixed(2)
				} else {
					return (parseFloat(0) * parseFloat(this.num) ).toFixed(2)
				}
			},
			userInfo() {
				return this.$store.state.userInfo;
			}
		},
		data() {
			return {
				describe: null,
				nodes: null,
				id: null,
				detail: null,
				price: '38.00',
				num: 1,
				isPayPopup: false,
				prompt: `1、本券仅限兑换价值35元的哈根达斯单球或小纸杯或脆皮条任选其一；\n2、使用本券消费时，门店不再提供发票；\n3、此券不得兑换现金或找赎；\n4、此券不得用于兑换其他礼券、礼品卡。 `
			};
		},
		filters: {
			filterCont(cont) {
				if(cont) {
					return cont.replace(/\<img/gi, '<img style="max-width: 100%;" ')
				} else {
					return ''
				}
		  }
		},
		onLoad(obj) {
			this.id = obj.id
			this.getDetail(obj.id)
			HelpApi.notice()
				.then(res=> this.nodes = res)
		},
		methods: {
			getDetail(id) {
				TabApi.getBuyTicketDetail(id)
					.then(res=> {
						this.detail = res
						this.describe = res.describe
					})
			},
			goHome() {
				uni.switchTab({
					url: '/pages/Tab/BuyTicket/BuyTicket'
				})
			},
			onSubmit() {
				console.log(this.userAccredit)
				if(this.userAccredit) {
					this.$refs.showPicker.show()
					return
				}
				this.isPayPopup = true
			},
			// 选择商品数量
			onStepperChange({
				detail
			}) {
				this.num = detail
			},
			// 选择商品达到可不用时
			onStepperOrverLimit() {
				toast('已达到该商品购买限制')
			},
			// 立即支付
			onPlaceOrder() {
				// 调用支付接口
				this.showLoading('支付中')
				// 下单
				orderApi.orderAnPlace(this.id, this.num)
					// 下单成功后就发起微信支付
					.then((res)=> this.orderPay(res.id))
					.catch(err => {
						console.log(err)
						this.isPayPopup = false
						this.hideLoading()
						alert(err).then(() => setTimeout(() => uni.navigateBack(), 300))
					})
			},
			
			// 支付 后期此处会先发起微信支付
			orderPay(id) {
				orderApi.orderPay(id)
					.then((res)=>{
						this.hideLoading()
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: res.timestamp,
							nonceStr: res.nonceStr,
							package: res.package,
							signType: res.signType,
							paySign: res.paySign,
							success: (res) => {
								// 支付成功
								this.isPayPopup = false
								this.$refs.succeed.show()
							},
							fail: (err)  => {
								this.isPayPopup = false
								toast('取消支付')
							}
						})
					})
					.catch(err => {
						this.isPayPopup = false
						this.hideLoading()
						alert(err).then(() => setTimeout(() => uni.navigateBack(), 300))
					})
			},
			
			// 微信用户授权方法回调
			GetUserSuccess(e) {
				this.$refs.showPicker.close();
				this.isPayPopup = true
			},
		},
		onShareAppMessage() {
			return {
				title: `${this.userInfo.nickName}发现了${this.detail.title}分享给你`
			}
		}
	};
</script>

<style lang="scss">
	page {
		background: #fff;
	}

	.header {
		margin: 30upx;
		margin-top: 0;
		padding: 30upx 50upx;
		background-color: #fff;
		box-shadow: 0 10upx 50upx 0 rgba(0, 0, 0, 0.1);
		position: relative;
		overflow: hidden;

		&::before,
		&::after {
			content: '';
			position: absolute;
			top: 0;
			bottom: 0;
			margin: auto;
			width: 40upx;
			height: 40upx;
			border-radius: 40upx;
			background-color: rgba(#000, 0.05);
		}

		&::before {
			left: -20upx;
		}

		&::after {
			right: -20upx;
		}

		.title {
			font-size: 30upx;
			color: #000;
			line-height: 42upx;
			padding-bottom: 30upx;
			border-bottom: 1upx dashed #ccc;
		}

		.desc {
			margin-top: 20upx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.money {
				font-size: 36upx;
				color: #ff3401;
				line-height: 50upx;
			}

			.price {
				font-size: 26upx;
				color: #999999;
				line-height: 37upx;
			}
		}
	}

	.details {
		padding: 0 40upx;
		padding-top: 20upx;
	}

	.bottom-item {
		width: 150upx;
	}

	.purchase-notes {
		font-size: 24upx;
		color: #666;
		line-height: 33upx;
		text-align: justify;
	}

	button {
		background-color: transparent; //可根据自己的背景颜色自行设置
		border-radius: 0upx;
		padding: 0upx;
		margin: 0upx;
		display: inline-block;
		line-height: 1;
	}

	button::after {
		/*button的边框样式是通过::after方式实现的*/
		border: none;
	}

	.button-hover {
		/*点击后样式*/
		color: #000;
		background-color: transparent;
	}


	.popup-shops-cont>.popup-shops-item {
		margin: 0 40rpx;
		padding: 30rpx 0;
		padding-bottom: 50rpx;
	}

	.popup-shops-cont>.popup-shops-item>.title {
		font-weight: bold;
		font-size: 30rpx;
		color: #333;
		margin-bottom: 20rpx;
	}

	.popup-shops-cont>.popup-shops-item>.desc {
		display: flex;
		justify-content: space-between;
		font-size: 28rpx;
		color: #666;
	}

	.popup-shops-cont>.popup-shops-item>.desc>text:first-child {
		color: #FC4E11;
	}


	.popup-shops-cont>.popup-shops-item-num {
		font-size: 28rpx;
		color: #666;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}


	.van-stepper__minus,
	.van-stepper__plus {
		border-radius: 0 !important;
	}

	.van-stepper__minus,
	.van-stepper__plus {
		width: 45rpx !important;
		height: 45rpx !important;
		line-height: 45rpx !important;
		text-align: center !important;
		font-size: 32rpx !important;
		color: #333 !important;
		border: none !important;
		background: #F1F1F1 !important;
	}

	.van-stepper__input-wrapper {
		width: 45rpx !important;
		height: 45rpx !important;
		line-height: 45rpx !important;
		text-align: center !important;
		border: none !important;
		background: #F1F1F1 !important;
		font-size: 32rpx !important;
		color: #FF3401 !important;
		margin: 0 30rpx !important;
	}

	.popup-shops-confirm-btn {
		height: 94rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 0;
	}
</style>
